<template>
  <div
    :class="{
      backtop_container: true,
      elevator_fix: isFixed,
      elevator_recommend: isFixed,
    }"
  >
    <div class="container-box" v-for="item in dataList" :key="item.id">
      <div
        @click="handleGoUrl(item)"
        style="width: 84px; height: 91px; cursor: pointer"
      >
        <img style="width: 100%; height: 100%" :src="item.img" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import img0 from "../assets/images/jzdjt.png";
import img1 from "../assets/images/group111.png";
import img2 from "../assets/images/group112.png";
import img3 from "../assets/images/group113.png";
import img4 from "../assets/images/group114.png";
export default {
  // 左侧浮动栏组件
  name: "MFiexdBox",
  data() {
    return {
      isFixed: false,
      dataList: [
        {
          id: 1,
          text: "赛项资源",
          url: "/eventresources",
          img: img1,
        },
        {
          id: 2,
          text: "1+X证书",
          url: "/bookresources",
          img: img2,
        },
        {
          id: 3,
          text: "技能培训",
          url: "/skillsresources",
          img: img3,
        },
        {
          id: 0,
          text: "金职大讲堂",
          url: "/courseresources",
          img: img0,
        },
        {
          id: 4,
          text: "行业资源",
          url: "/industryResources",
          img: img4,
        },
      ], // 左侧浮动栏数据
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleGoUrl(item) {
      if (item.url == "/") {
        this.$message("功能暂未开放！敬请期待~");
        return;
      }
      if (item.url === this.$router.currentRoute.fullPath) {
        return;
      }
      this.$router.push(item.url);
    },
    handleScroll() {
      const scrollPosition =
        window.scrollY || document.documentElement.scrollTop;
      if (scrollPosition > 600) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.elevator_recommend {
  -webkit-transform: translateY(60px);
  -ms-transform: translateY(60px);
  transform: translateY(60px);
}
.elevator_fix {
  position: fixed !important;
  top: 70px !important;
  left: 9% !important;
  margin-left: 0px !important;
  -webkit-animation: eleShow 0.5s ease both !important;
  animation: eleShow 0.5s ease both !important;
}
.backtop_container {
  position: absolute;
  top: 76px;
  margin-left: -180px;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  z-index: 100;
  // position: sticky;
  // transform: translate(50%, 20%);
  // width: 80px;
  // bottom: 40%;
  // margin-left: -200px;
  // border-radius: 12px;
  // display: flex;
  // flex-direction: column;
  // z-index: 2;
  // box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px;
  .container-box {
    width: 50px;
    text-align: center;
    font-size: 12px;
  }
}
</style>
